<template>
  <div class="padding-20">
    <div class="dig-top">
      <div class="dig-top-title">{{title}}<span class="time">{{deadlineTitle}}</span> <span class="dig">单位：万元</span></div>
    </div>
    <div class="table-box" v-if="dataInfo.length>0">
      <div class="table-item" v-for="(item,index) in dataInfo" :key="index">
        <div class="table-title">{{item.projectName}}</div>
        <div v-for="(items,indexs) in item.itemDtos" :key="indexs">
          <div v-if="index==0 && type">
            <div :class="!items.isSecond?'name-first':'name-second'"><div class="item" >{{items.chargeItemName}}</div></div>
            <div :class="!items.isSecond?'name-item':'name-item-second'"><div class="item">计划偏差</div></div>
            <div :class="!items.isSecond?'name-last':'name-last-second'"><div class="item">同比偏差</div></div>
          </div>
          <div v-if="index>0 && type">
            <div :class="!items.isSecond?'name-first':'name-second-normal'">{{items.inflowPrice | moneyFilter}}</div>
            <div class="name-item">{{items.planPrice | moneyFilter}}<span :class="items.plantDeviationPrice>=0?'blue':'red'">{{items.plantDeviationPrice>=0?'↑':'↓'}}{{Math.abs(items.plantDeviationPrice) | accMul}}%</span></div>
            <div class="name-item name-last">--</div>
          </div>
          <div v-if="index==0 && !type">
            <div :class="indexs>0?'name-second':'name-first'">{{title}}</div>
            <div :class="indexs>0?'name-item-second':'name-item'">计划偏差</div>
            <div :class="indexs>0?'name-last-second':'name-last'">同比偏差</div>
          </div>
          <div v-if="index>0 && !type">
            <div :class="items.chargeItemName?'name-second-normal':'name-first'">{{items.inflowPrice | moneyFilter}}</div>
            <div class="name-item">{{items.planPrice | moneyFilter}}<span :class="items.plantDeviationPrice>=0?'blue':'red'">{{items.plantDeviationPrice>=0?'↑':'↓'}}{{Math.abs(items.plantDeviationPrice) | accMul}}%</span></div>
            <div class="name-item name-last">--</div>
          </div>
        </div>
      </div>
    </div>
    <el-empty v-else description="暂无数据"></el-empty>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import { cashFlowChargeItem,performanceFinancialDetail } from '../api/index';
  export default {
    props:{
      selectTime: {
        type: String,
        default: dayjs(new Date(new Date().getTime() - 24*30*60*60*1000)).format('YYYY-MM'),
      },
      type: {
        type: String,
        default: '',
      },
      title:{
        type: String,
        default: '',
      },
      bizType:{
        type: Array,
        default: () => {
          return [];
        },
      }
    },
    data() {
      return {
        dataInfo:[],
        deadlineTitle:''
      };
    },
    watch:{
      bizType:{
        deep:true,
        immediate:true,
        handler(val){
          if(this.type){
            this.getDetail()
          }else{
            this.getPerformanceFinancialDetail()
          }
        }
      }
    },
    created(){},
    methods: {
      async getPerformanceFinancialDetail(){
        this.dataInfo=[]
        let res = await performanceFinancialDetail({
          month: new Date(this.selectTime).getMonth()+1,
          year:new Date(this.selectTime).getFullYear(),
          type:this.bizType[0]
        });
        if(res.rows&&res.rows.length>0){
          let itemDtos = []
          res.rows.forEach((ele,index)=>{
            ele.itemDtos=[ele]
            if(index==0){
              itemDtos = ele.itemDtos
            }else{
              ele.itemDtos=ele.itemDtos.concat(ele.itemDtos[0].itemDtos)
            }
          })
          res.rows.unshift({
            projectName:'',
            itemDtos:itemDtos
          })
        }
        this.deadlineTitle = res.deadlineTitle
        this.dataInfo = res.rows;
      },
      async getDetail() {
        this.dataInfo=[]
        let res = await cashFlowChargeItem({
          month: new Date(this.selectTime).getMonth()+1,
          year:new Date(this.selectTime).getFullYear(),
          cycle:this.type,
          bizTypes:this.bizType
        });
        if(res.rows&&res.rows.length>0){
          let itemDtos = []
          res.rows.forEach((ele,index)=>{
            if(index==0){
              itemDtos = ele.itemDtos.concat(ele.itemDtos[0].itemDtos)
            }else{
              if(ele.itemDtos[0].itemDtos.length>0){
                ele.itemDtos[0].itemDtos.forEach(element=>{
                  element.isSecond=true
                })
              }
              ele.itemDtos=ele.itemDtos.concat(ele.itemDtos[0].itemDtos)
            }
          })
          res.rows.unshift({
            projectName:'',
            itemDtos:itemDtos
          })
        }
        this.deadlineTitle = res.deadlineTitle
        this.dataInfo = res.rows;
      },
    },
    components: {
      
    },
  };
</script>
<style lang="less" scoped>
   .item{
     width: 200px;
     text-align: left;
   }
   .dig-top{
     position: absolute;
     height: 50px;
     top:5px;
     left: 0;
     width: 80%;
     .dig-top-title{
       color: #333;
       font-size: 18px;
       height: 50px;
       line-height: 50px;
       padding-left: 30px;
     }
     .time{
       color: #999;
       font-size: 14px;
       height: 50px;
       line-height: 50px;
       padding-right: 20px;
       padding-left: 10px;
     }
     .dig{
       color: #333;
       font-size: 14px;
       height: 50px;
       line-height: 50px;
     }
   }
   .dig-line{
     border-bottom: 1px solid #f0f0f0;
     margin:0 -20px;
   }
   .table-box{
     display: flex;
     justify-content: flex-start;
     .table-item:first-child{
       width:300px;
     }
     .table-item{
       width:100%;
        .table-title{
          color: #333;
          font-size: 14px;
          font-weight: 500;
          background: #f2f2f2;
          height: 40px;
          line-height: 40px;
          flex: 1;
          text-align: center;
          border-left: 1px solid #fff;
          box-sizing: border-box;
        }
        .name-item{
          height: 40px;
          line-height: 40px;
          text-align: center;
          border-left: 1px solid #fff;
          box-sizing: border-box;
          text-align: center;
          display: flex;
          justify-content: center;
        }
        .name-first{
          background: #3384FE;
          color:#fff;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border-left: 1px solid #fff;
          box-sizing: border-box;
          text-align: center;
          display: flex;
          justify-content: center;
        }
        .name-second{
          background: #8FBCFF;
          color:#333;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border-left: 1px solid #fff;
          box-sizing: border-box;
          text-align: center;
          padding-left: 80px;
        }
        .name-second-normal{
          background: #8FBCFF;
          color:#333;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border-left: 1px solid #fff;
          box-sizing: border-box;
          text-align: center;
        }
        .name-item-second{
          height: 40px;
          line-height: 40px;
          text-align: center;
          border-left: 1px solid #fff;
          box-sizing: border-box;
          text-align: center;
          padding-left: 80px;
        }
        .name-last{
          height: 40px;
          line-height: 40px;
          text-align: center;
          border-left: 1px solid #fff;
          box-sizing: border-box;
          text-align: center;
          background: #FBFBFB;
          display: flex;
          justify-content: center;
        }
        .name-last-second{
          height: 40px;
          line-height: 40px;
          text-align: center;
          border-left: 1px solid #fff;
          box-sizing: border-box;
          text-align: center;
          background: #FBFBFB;
          padding-left: 80px;
        }
        .blue{
          color: #29C37F;
          padding-left: 10px;
        }
        .red{
          color: #EB5757;
          padding-left: 10px;
        }
     }
   }
</style>
